<template>
  <div class="login">
     <Header title="注册"></Header>
     <div class="img">美团</div>
     <van-form @submit="onSubmit">
  <van-cell-group inset>
    <van-field
      v-model="data.username"
      name="username"
      label="用户名"
      placeholder="用户名"
      :rules="[{ required: true, message: '请填写用户名' }]"
    />
    <van-field
      v-model="data.password"
      type="password"
      name="password"
      label="密码"
      placeholder="密码"
      :rules="[{ required: true, message: '请填写密码' }]"
    />
  </van-cell-group>
  <div style="margin: 16px;">
    <van-button round block type="primary" native-type="submit" color="#ffc400">
      注册
    </van-button>
     <van-button round block type="primary" native-type="submit" color="#ffc400" @click="toRegist()" style="margin-top: 20px;">
      已有账号，去登录
    </van-button>
  </div>
</van-form>
  </div>
</template>

<script  setup>
import { reactive } from 'vue';
import Header from '../../components/Header.vue';
let data=reactive({
  username:'',
  password:''
})

import { useRouter } from 'vue-router';
let router=useRouter()
const toRegist=()=>{
   router.push('/login')
}

import { Toast } from 'vant';

const onSubmit=(value)=>{
   if(localStorage.userInfo){
      let userInfo=JSON.parse(localStorage.userInfo)
      if(userInfo['username']==value['username']){
         Toast('用户已存在')
         return;
      }else{
        localStorage.setItem('userInfo',JSON.stringify(value))
        router.push('/login')
      }
   }else{
     localStorage.setItem('userInfo',JSON.stringify(value))
   }
}
</script>

<style scoped>
.login{
   .img{
    width: 200px;
    height: 200px;
    background-color: #ffc400;
    font-size:60px;
    line-height: 200px;
    text-align: center;
    border-radius: 40px;
    margin: 20px auto;
   }
}
</style>
